<template>
  <uni-nav-bar title="安蓝卡车后市场服务平台" color="#333" :border="false" statusBar></uni-nav-bar>
  <environment></environment>
  <view class="column">
    <view class="text">安蓝卡车后市场服务平台</view>
    <image
      src="../../static/account/pay.png"
      mode=""
      style="width: 104rpx; height: 76rpx; margin: 20rpx 0px 0px"
    ></image>
    <view class="text">帮好友充值</view>
    <view class="center money">
      <text style="font-size: 30rpx; margin-bottom: 15rpx; margin-right: 8rpx">¥</text>
      <text style="font-size: 82rpx">{{ orderAll.total_amount }}</text>
    </view>
    <view class="center money">
      <text style="color: #666">{{ orderAll.driver_name }}可得</text>
      <text style="font-size: 20rpx; margin: 0px 2px 0px 10rpx; margin-bottom: 2rpx">¥</text>
      <text style="font-size: 32rpx; margin-bottom: -3rpx">{{ orderAll.total_amount }}</text>
    </view>
    <view class="center money">
      <text style="color: #666">您可得平台奖励</text>
      <text style="font-size: 20rpx; margin: 0px 2px 0px 10rpx; margin-bottom: 1px">¥</text>
      <text style="font-size: 32rpx; margin-bottom: -3rpx">{{ orderAll.from_price }}</text>
    </view>
    <view class="but" @click="makeFor" :style="{ background: orderAll.status == '0' ? '' : '#666' }">微信支付</view>
    <view class="title">请确认代充值信息充值金额加到好友安蓝钱包</view>
    <view class="title">奖励金额加到您的安蓝钱包不可退回</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { redirectTo } from '@/utils/navigator';
import environment from '@c/pobulic/environment.vue';
import { onLoad } from '@dcloudio/uni-app';
import { errorToast, showToast, successToast, showLoading } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { recharge_order } from '@/gql/account';
import { getDriverID } from '@/stores/driverID';
import { useUserStore } from '@/stores/user';
import { decrypt } from '@/utils/jsencrypt';
const driver_id = getDriverID();
const userInfo = useUserStore();
const orderID = ref();
const orderAll = ref({});

const repeat = ref(true); //放重复点击
onLoad(() => {
  const loct = uni.getStorageSync('StoreData')
  orderID.value = JSON.parse(decrypt(loct)).orderId
  init();
});
function init() {
  const payload = {
    query: recharge_order,
    variables: { order_id: Number(orderID.value), driver_id },
  };
  toPublish('ql/driver/getRechargeImage', payload, (obj: { data: any }) => {
    const { data } = obj;
    orderAll.value = data.recharge_order;
  });
}
function makeFor() {
  if (orderAll.value.status == -1) {
    errorToast('代理充值已过期');
    return;
  } else if (orderAll.value.status == 1) {
    errorToast('代理充值已被充值 暂无法充值');
    return;
  }
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    order_type: 'recharge',
    order_id: Number(orderID.value),
    type: 'wechat',
    method: 'mp',
    driver_id,
  };
  toPublish('order_recharge/payOrder', payload, paymentHandler, () => errorToast('发起支付超时'));
}
/**
 * 微信支付
 */
function paymentHandler(obj: any) {
  if (obj.code === 1) {
    repeat.value = true;
    // @ts-ignore
    WeixinJSBridge.invoke('getBrandWCPayRequest', obj.data, function(res) {
      switch (res.err_msg) {
        case 'get_brand_wcpay_request:ok':
          userInfo.getUserInfo();
          successToast('充值成功');
          redirectTo('account/AgentSuccee?id=' + orderID.value);
          break;
        case 'get_brand_wcpay_request:cancel':
          showToast('充值取消');
          break;
        case 'get_brand_wcpay_request:fail':
          errorToast('充值失败');
          break;
      }
    });
  } else {
     repeat.value = true;
    errorToast(obj.msg);
  }
}
</script>

<style scoped lang="less">
page {
  background-color: #fff;
}

body {
  background-color: #fff;
  height: 100vh;
  overflow: auto;
  font-family: 'PingFangSC-Regular', 'PingFang SC';
}
.text {
  font-size: 42rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1b91ff;
  letter-spacing: 1px;
  margin-top: 20rpx;
}
.money {
  color: #1b91ff;
  margin-top: 20rpx;
  align-items: flex-end;
}
.but {
  width: 608rpx;
  margin: 20rpx auto 40rpx;
  height: 82rpx;
  text-align: center;
  line-height: 82rpx;
  background: #23d203;
  box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 1px;
}
.title {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 40rpx;
  letter-spacing: 1px;
}
</style>
